<template>
<div class="home">
  <home-header />
  <home-swiper :swiperList="swiperList" />
  <home-icons :iconsList="iconsList" />
  <home-location />
  <home-hot :hotList="hotList" />
  <home-hobby :hobbyList="hobbyList" />
</div>
</template>

<script>
import HomeHeader from './pages/Header'
import HomeSwiper from './pages/Swiper'
import HomeIcons from './pages/Icons'
import HomeLocation from './pages/Location'
import HomeHot from './pages/Hot'
import HomeHobby from './pages/Hobby'

import {mapState} from 'vuex'
export default {
  data () {
    return {
      swiperList: [],
      iconsList: [],
      hotList: [],
      hobbyList: [],
      newCity: ''
    }
  },
  computed: {
    ...mapState(['city'])
  },
  methods: {
    getHttp () {
      this.$http({
        method: 'get',
        url: 'http://www.hspstudio.club/gethomedata'
        // url: 'http://www.hspstudio.club/getdata.php'
      }).then(res => {
        let data = res.data.data.data
        // console.log(data)
        // console.log(this.city)
        data.forEach(v => {
          // console.log(v.city)
          if (v.city === this.city) {
            this.swiperList = v.swiperList
            this.iconsList = v.iconsList
            this.hotList = v.hotList
            this.hobbyList = v.hobbyList
          }
        })
      })
    }
  },
  created () {
    /* this.$http.get('http://192.168.0.106:8082/static/mock/data/data.json').then(res => {
      console.log(res.data.data[0])
      let data = res.data.data[0]
      this.swiperList = data.swiperList
      this.iconsList = data.iconsList
      this.hotList = data.hotList
      this.hobbyList = data.hobbyList
    }) */
    this.getHttp()
    this.newCity = this.city
  },
  activated () {
    // console.log(this.city, this.newCity)
    if (this.city !== this.newCity) {
      this.getHttp()
      this.newCity = this.city
    }
  },
  components: {
    HomeHeader,
    HomeSwiper,
    HomeIcons,
    HomeLocation,
    HomeHot,
    HomeHobby
  }
}
</script>

<style scoped>
  .home {
    background-color: #f5f5f5;
    color: #212121;
    overflow: hidden;
  }
</style>
